<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态CSV数据表格</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            position: relative;
        }
        .filter-input {
            width: 100%;
            box-sizing: border-box;
            margin-top: 5px;
        }
        .no-results {
            display: none;
            margin: 20px 0;
            color: #666;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>静态CSV数据表格</h1>
    
    <div id="tableContainer"></div>
    <div id="noResults" class="no-results">没有找到匹配的数据</div>

    <!-- 将CSV数据直接嵌入JavaScript中 -->
    <script>
        // 这里是你的CSV数据（可以直接替换为你的实际数据）
        const csvData = `姓名,年龄,职业,城市
张三,30,工程师,北京
李四,25,设计师,上海
王五,35,教师,广州
赵六,28,医生,深圳
钱七,42,经理,杭州
孙八,31,程序员,成都`;

        // 解析CSV数据
        function parseCSV(csv) {
            const lines = csv.split('\n');
            const headers = lines[0].split(',');
            const result = [];
            
            for (let i = 1; i < lines.length; i++) {
                if (!lines[i].trim()) continue;
                const obj = {};
                const currentline = lines[i].split(',');
                
                for (let j = 0; j < headers.length; j++) {
                    obj[headers[j].trim()] = currentline[j] ? currentline[j].trim() : '';
                }
                result.push(obj);
            }
            return { data: result, headers: headers };
        }

        // 渲染表格
        function renderTable(data, headers) {
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const headerRow = document.createElement('tr');
            
            // 创建表头
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                
                // 添加筛选输入框
                const filterInput = document.createElement('input');
                filterInput.type = 'text';
                filterInput.className = 'filter-input';
                filterInput.placeholder = '筛选 ' + header;
                filterInput.dataset.column = header;
                
                filterInput.addEventListener('input', applyFilters);
                
                const filterDiv = document.createElement('div');
                filterDiv.appendChild(filterInput);
                th.appendChild(filterDiv);
                
                headerRow.appendChild(th);
            });
            
            thead.appendChild(headerRow);
            table.appendChild(thead);
            
            // 创建表格内容
            const tbody = document.createElement('tbody');
            
            data.forEach(row => {
                const tr = document.createElement('tr');
                tr.dataset.rowData = JSON.stringify(row);
                
                headers.forEach(header => {
                    const td = document.createElement('td');
                    td.textContent = row[header] || '';
                    tr.appendChild(td);
                });
                
                tbody.appendChild(tr);
            });
            
            table.appendChild(tbody);
            document.getElementById('tableContainer').appendChild(table);
        }

        // 应用筛选
        function applyFilters() {
            const table = document.querySelector('table');
            const noResults = document.getElementById('noResults');
            if (!table) return;
            
            const filterInputs = table.querySelectorAll('.filter-input');
            const filters = {};
            let hasFilters = false;
            
            // 收集所有筛选条件
            filterInputs.forEach(input => {
                const column = input.dataset.column;
                const value = input.value.trim().toLowerCase();
                if (value) {
                    filters[column] = value;
                    hasFilters = true;
                }
            });
            
            // 如果没有筛选条件，显示所有行
            if (!hasFilters) {
                const rows = table.querySelectorAll('tbody tr');
                rows.forEach(row => {
                    row.style.display = '';
                });
                noResults.style.display = 'none';
                return;
            }
            
            // 应用筛选
            const rows = table.querySelectorAll('tbody tr');
            let visibleRows = 0;
            
            rows.forEach(row => {
                const rowData = JSON.parse(row.dataset.rowData);
                let shouldShow = true;
                
                for (const [column, filterValue] of Object.entries(filters)) {
                    const cellValue = String(rowData[column] || '').toLowerCase();
                    if (!cellValue.includes(filterValue)) {
                        shouldShow = false;
                        break;
                    }
                }
                
                row.style.display = shouldShow ? '' : 'none';
                if (shouldShow) visibleRows++;
            });
            
            // 显示"无结果"提示
            noResults.style.display = visibleRows === 0 ? 'block' : 'none';
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            const parsedData = parseCSV(csvData);
            renderTable(parsedData.data, parsedData.headers);
        });
    </script>
</body>
</html>